<template>
	<div class="app-container home">
		<el-row type="flex" justify="center" :gutter="10" style="height: 18vh;">
			<el-col :span="24">
				<el-card>
					<div slot="header">
						<span>总计数据</span>
					</div>
					<div>
						<el-row type="flex" justify="center" :gutter="10">
							<el-col :span="6">
								<el-card class="today">
									<div class="font-title">
										<span>今日接单</span>
									</div>
									<div class="font-content">
										{{2000}}单
									</div>
								</el-card>
							</el-col>
							<el-col :span="6">
								<el-card class="month">
									<div class="font-title">
										<span>本月接单</span>
									</div>
									<div class="font-content">
										{{200000}}单
									</div>
								</el-card>
							</el-col>
							<el-col :span="6">
								<el-card class="year">
									<div class="font-title">
										<span>今日完成</span>
									</div>
									<div class="font-content">
										{{1500}}单
									</div>
								</el-card>
							</el-col>
							<el-col :span="6">
								<el-card class="year-save">
									<div class="font-title">
										<span>本月完成</span>
									</div>
									<div class="font-content">
										{{150000}}单
									</div>
								</el-card>
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center" :gutter="10" style="margin-top:10px;">
			<el-col :span="12" style="height: 100%;">
				<el-card style="height: 100%;">
					<div slot="header">
						<span>我的站点概览</span>
					</div>
					<div style=" display: flex; height: 40vh;">
						<h1
							style="display: flex; align-items: center;     flex-direction: row;    justify-content: center;text-align: center;width: 100%;">
							暂无数据</h1>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<div slot="header">
						<span>我的接单情况</span>
					</div>
					<div>
						<el-table :data="productPowerReportList" style="height: 40vh;">
							<el-table-column label="序号" type="index" align="center" width="50" />
							<el-table-column label="单号" align="center" prop="materialName" />
							<el-table-column label="当天单数" align="center" prop="productQuantity" />
							<el-table-column label="类型" align="center" prop="powerConsume" />
							<el-table-column label="当月单数" align="center" prop="carbonEmission"
								:formatter="carbonEmissionFormat" />
							<el-table-column label="总单数" align="center" prop="totalCarbonEmission"
								:formatter="totalCarbonEmissionFormat" />
						</el-table>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center" :gutter="10" style="margin-top:10px;">
			<el-col :span="12">
				<el-card>
					<div slot="header">
						<span>今年本月接单情况</span>
					</div>
					<div>
						<div id="energyOverall" :style="{ minHeight: '300px',height:'40vh' }"></div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<div slot="header">
						<span>预警一级分类饼图分布</span>
					</div>
					<div>
						<div id="energyPercent" :style="{ minHeight: '300px',height:'40vh' }"></div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		productPowerReportByDay,
		productPowerReportByMonth,
		productPowerReportByYear,
		productPowerReportOverall
	} from "@/api/carbonReport/productPowerReport";
	import {
		listEquipmentPowerReport
	} from "@/api/carbonReport/equipmentPowerReport";
	import {
		getEmissionOverall,
		getEmissionPercent
	} from "@/api/carbonReport/monitorChartReport";
	export default {
		name: "index",
		data() {
			return {
				energyOverall: {
					todayEmission: 0,
					thisMonthEmission: 0,
					thisYearEmission: 0,
					thisYearSave: 0,
				},
				equipmentPowerReportList: [],
				productPowerReportList: [],
				energyOverallCharOpts: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: []
					},
					series: [{
							name: '轨道监控',
							type: 'bar',
							data: []
						},
						{
							name: '列车监控:',
							type: 'bar',
							data: []
						},
						{
							name: '行车安全监控',
							type: 'bar',
							data: []
						},
						{
							name: '人流检测',
							type: 'bar',
							data: []
						},
						{
							name: '安全设施监控:',
							type: 'bar',
							data: []
						}
					]
				},
				energyPercentOpts: {
					title: {
						text: '预警一级分类',
						left: 'center',
						top: 20,
						textStyle: {
							color: '#000'
						}
					},
					tooltip: {
						trigger: 'item'
					},
					  legend: {
					    type: 'scroll',
					    orient: 'vertical',
					    right: 10,
					    top: 80,
					    data:['轨道监控','列车监控','行车安全监控','人流检测','安全设施监控']
					  },
					visualMap: {
						show: false,
						min: 80,
						max: 600,
						inRange: {
							colorLightness: [1, 0]
						}
					},
					series: [{
						
						type: 'pie',
						radius: ['30%','70%'],
						center: ['50%', '55%'],
						data: [{
								value: 335,
								name: '轨道监控'
							},
							{
								value: 310,
								name: '列车监控'
							},
							{
								value: 274,
								name: '行车安全监控'
							},
							{
								value: 235,
								name: '人流检测'
							},
							{
								value: 400,
								name: '安全设施监控'
							}
						].sort(function(a, b) {
							return a.value - b.value;
						}),
						roseType: 'radius',
						label: {
							color: 'rgba(0, 0, 0, 0.5)'
						},
						labelLine: {
							lineStyle: {
								color: 'rgba(0, 0, 0, 0.5)'
							},
							smooth: 0.2,
							length: 10,
							length2: 20
						},
						itemStyle: {
							color: '#c23531',
							
							
						},
					}]
				},
				energyMapOpts: {
					title: {},
					tooltip: {},
					series: [{
						name: '总能耗',
						type: 'treemap',
						visibleMin: 300,
						label: {
							show: true,
							formatter: '{b}'
						},
						itemStyle: {
							borderColor: '#fff'
						},
						levels: [{
								itemStyle: {
									borderWidth: 0,
									gapWidth: 5
								}
							},
							{
								itemStyle: {
									gapWidth: 1
								}
							},
							{
								colorSaturation: [0.35, 0.5],
								itemStyle: {
									gapWidth: 1,
									borderColorSaturation: 0.6
								}
							}
						],
						data: []
					}]
				},
				energyTrendOpts: {
					tooltip: {
						trigger: 'axis'
					},
					legend: {},
					toolbox: {
						show: true,
						feature: {
							magicType: {
								type: ['line', 'bar']
							},
							restore: {},
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: []
					},
					yAxis: {
						type: 'value',
					},
					series: [{
							name: '碳排放量',
							type: 'line',
							data: [],
						},
						{
							name: '碳减排量',
							type: 'line',
							data: [],
						}
					]
				}
			};
		},
		created() {
			this.getEnergyOverallReport();
			this.getEquipmentEmissionRank();
			this.getProductEmissionRank();
		},
		mounted() {
			this.getCarbonEmissionOverall();
			this.getCarbonEmissionPercent();
		},
		methods: {
			totalCarbonEmissionFormat(row, column) {
				return row.totalCarbonEmission.toFixed(2);
			},
			carbonEmissionFormat(row, column) {
				return row.carbonEmission.toFixed(2);
			},
			//获取综合能耗数据
			getCarbonEmissionOverall() {
				getEmissionOverall(null).then(res => {
					let data = res.data;
					for (let year in data) {
						let obj = data[year];
						this.energyOverallCharOpts.yAxis.data.push(year);
						this.energyOverallCharOpts.series[0].data.push(obj.totalPowerConsume);
						this.energyOverallCharOpts.series[1].data.push(obj.totalWaterConsume);
						this.energyOverallCharOpts.series[2].data.push(obj.totalOfficePowerConsume);
						this.energyOverallCharOpts.series[3].data.push(obj.totalOfficeWaterConsume);
						this.energyOverallCharOpts.series[4].data.push(obj.totalPrdPowerSave + obj
							.totalOfficePowerSave);

						this.energyTrendOpts.xAxis.data.push(year);
						this.energyTrendOpts.series[0].data.push(obj.totalCarbonEmission.toFixed(2));
						this.energyTrendOpts.series[1].data.push(obj.totalCarbonSave.toFixed(2));
					}
					this.drawEnergyOverall();
					this.drawEnergyTrend();
				})
			},
			//获取能耗占比
			getCarbonEmissionPercent() {
				getEmissionPercent().then(res => {
					let data = res.data[0];
					this.drawEnergyPercent();

					let officeConsume = data.totalOfficePowerConsume + data.totalOfficeWaterConsume;
					let prdConsume = data.totalPowerConsume + data.totalWaterConsume;
					this.energyMapOpts.series[0].data.push({
						"value": officeConsume,
						"name": "办公能耗",
						"children": [{
								"value": 10,
								"name": "轨道监控",
							},
							{
								"value": 20,
								"name": "行车安全监控",
							}, {
								"value": 30,
								"name": "行车安全监控",
							}, {
								"value": 40,
								"name": "人流检测",
							}, {
								"value": 50,
								"name": "安全设施监控",
							},
						]
					});
					this.drawEnergyMap();
				});
			},
			//获取设备能耗排行
			getEquipmentEmissionRank() {
				listEquipmentPowerReport({
					pageNum: 1,
					pageSize: 10,
				}).then(res => {
					this.equipmentPowerReportList = res.rows;
				})
			},
			//获取产品能耗排行
			getProductEmissionRank() {
				productPowerReportOverall({
					pageNum: 1,
					pageSize: 10,
				}).then(res => {
					this.productPowerReportList = res.rows;
				})
			},
			//获取能耗总览报表数据
			getEnergyOverallReport() {
				productPowerReportByDay(null).then(res => {
					let rows = res.rows;
					if (rows && rows.length > 0) {
						this.energyOverall.todayEmission = rows[0].totalCarbonEmission;
					}
				})
				productPowerReportByMonth(null).then(res => {
					let rows = res.rows;
					if (rows && rows.length > 0) {
						this.energyOverall.thisMonthEmission = rows[0].totalCarbonEmission;
					}
				})
				productPowerReportByYear(null).then(res => {
					let rows = res.rows;
					if (rows && rows.length > 0) {
						this.energyOverall.thisYearEmission = rows[0].totalCarbonEmission;
						this.energyOverall.thisYearSave = rows[0].totalCarbonSave;
					}
				})
			},
			drawEnergyOverall() {
				let myChart = this.$echarts.init(document.getElementById('energyOverall'));
				// 绘制图表
				myChart.setOption(this.energyOverallCharOpts);
				window.addEventListener('resize', myChart.resize);
			},
			drawEnergyPercent() {
				let myChart = this.$echarts.init(document.getElementById('energyPercent'));
				// 绘制图表
				myChart.setOption(this.energyPercentOpts);
				window.addEventListener('resize', myChart.resize);
			},
			drawEnergyMap() {
				let myChart = this.$echarts.init(document.getElementById('energyMap'));
				// 绘制图表
				myChart.setOption(this.energyMapOpts);
				window.addEventListener('resize', myChart.resize);
			},
			drawEnergyTrend() {
				let myChart = this.$echarts.init(document.getElementById('energyTrend'));
				// 绘制图表
				myChart.setOption(this.energyTrendOpts);
				window.addEventListener('resize', myChart.resize);
			},
		},
	};
</script>

<style scoped lang="scss">
	.home {
		font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 13px;
		color: #676a6c;
		overflow-x: hidden;
	}

	.font-content {
		font-size: 32px;
	}

	.font-title {
		font-size: 20px;
		padding-bottom: 20px;
	}

	.today {
		background-color: #60cfeb;
		color: aliceblue;
	}

	.month {
		background-color: #f7b018;
		color: aliceblue;
	}

	.year {
		background-color: #fb846c;
		color: aliceblue;
	}

	.year-save {
		background-color: #28b976;
		color: aliceblue;
	}
</style>